<template>
	<wd-config-provider theme="dark">
		<view class="tabbarpage-container-dark">
			<!--胶囊上方-->
			<div :style="{'padding-top': statusBarHeight}">
				
			</div>
			<!--胶囊-->
			<div class="head-container" :style="{'height': capsuleHeight}">
				<wd-icon @click="jumpBack" color="#fff" name="thin-arrow-left" size="18px"></wd-icon>
				<div>查看错题</div>
				<div style="width: 18px;"></div>
			</div>
			<!--主体-->
			<div class="tabbarpage-body" >
				<div class="ques-container">
					<div style="position: relative;">
						<!--文章-->
						<div class="ques-line">
							<div class="h1-line">
								<div class="h1" v-if="quesData.category === 'xuanze'">题目：</div>
								<div class="h1" v-if="quesData.category === 'yuedu'">文章：</div>
								<div class="tag-container">
									<div class="tag">{{quesData.category === 'xuanze' ? '选择' : '阅读'}}</div>
									<div class="tag" v-if="quesData.field !== undefined && quesData.field !== null && quesData.field">{{quesData.field}}</div>
								</div>
							</div>
							<p v-if="quesData.category === 'xuanze' && !changeMode">{{quesData.problem}}</p>
							<textarea v-if="quesData.category === 'xuanze' && changeMode" auto-height maxlength="-1" v-model="quesData.problem" class="text-area"></textarea>
							<p v-if="quesData.category === 'yuedu' && !changeMode">{{quesData.content}}</p>
							<textarea v-if="quesData.category === 'yuedu' && changeMode" auto-height maxlength="-1" v-model="quesData.problem" class="text-area"></textarea>
						</div>
						<!--选择-->
						<div v-if="quesData.category === 'xuanze'">
							<!--选项-->
							<XuanzeCard mode="normal"
										:choice1="quesData.choice1" 
										:choice2="quesData.choice2"
										:choice3="quesData.choice3" 
										:choice4="quesData.choice4"
										:stuAnswer="quesData.stuAnswer"
										:answer="quesData.answer"
										@changeStuAnswer="(newAnwer)=>{
											if(changeMode){
												quesData.stuAnswer = newAnwer
											}
										}"></XuanzeCard>
							<!--AI分析-->
							<div class="sure-btn-container">
								<button class="sure-btn" @click="aiAnalyseBtn()">一键AI分析</button>
							</div>
							<!--智能分析-->
							<div class="ques-line">
								<div class="h1">智能分析：</div>
								<p>{{quesData.aiComment}}</p>
							</div>
							<!--错因-->
							<div class="ques-line dark-purple-card ques-line-card">
								<div class="h1-line">
									<div class="h1" style="margin-bottom: 0;">错因：</div>
									<div style="flex: 1;"></div>
									<div v-if="!changeMode">{{quesData.falseReason}}</div>
									<input v-else style="width: 160px; padding: 4px 12px; background-color: #ffffff11;" v-model="quesData.falseReason"/>
								</div>
							</div>
							<!--用户备注-->
							<div class="ques-line dark-purple-card ques-line-card">
								<div class="h1">用户备注：</div>
								<p v-if="!changeMode">{{quesData.userComment}}</p>
								<textarea v-else auto-height maxlength="-1" v-model="quesData.userComment" class="text-area"></textarea>
							</div>
							<!--新增错题-->
							<div class="sure-btn-container">
								<button v-if="changeMode" class="sure-btn" @click="addNewQuesBtn()">更改错题</button>
							</div>
						</div>
						<!--阅读-->
						<div v-if="quesData.category === 'yuedu'">
							<!--题目-->
							<div v-for="(exer, yueduIndex) in quesData.cuoTiList">
								<!--题目-->
								<div class="ques-line">
									<div class="h1">题目{{Number(yueduIndex+1)}}:</div>
									<div v-if="!changeMode">{{exer.problem}}</div>
									<textarea v-else auto-height maxlength="-1" v-model="exer.problem" class="text-area"></textarea>
								</div>
								<!--选项-->
								<XuanzeCard mode="normal"
											:choice1="exer.choice1" 
											:choice2="exer.choice2"
											:choice3="exer.choice3" 
											:choice4="exer.choice4"
											:stuAnswer="exer.stuAnswer"
											:answer="exer.answer"
											@changeStuAnswer="(newAnwer)=>{
												if(changeMode){
													exer.stuAnswer = newAnwer
												}
											}"></XuanzeCard>
								<!--智能分析-->
								<div class="ques-line">
									<div class="h1">智能分析：</div>
									<p>{{exer.aiComment}}</p>
								</div>
								<!--分割线-->
								<wd-divider></wd-divider>
							</div>
							<!--AI分析-->
							<div v-if="changeMode" class="sure-btn-container">
								<button class="sure-btn" @click="aiAnalyseBtnYueDu()">一键AI分析</button>
							</div>
							<!--用户备注-->
							<div class="ques-line dark-purple-card ques-line-card">
								<div class="h1">用户备注：</div>
								<p v-if="!changeMode">{{quesData.userComment}}</p>
								<textarea v-else auto-height maxlength="-1" v-model="quesData.userComment" class="text-area"></textarea>
							</div>
							<!--新增错题-->
							<div style="margin-bottom: 72px;" class="sure-btn-container">
								<button v-if="changeMode" class="sure-btn" @click="addNewQuesBtn()">更改错题</button>
							</div>
						</div>
					</div>
				</div>
				<!--底部tabbar占据高度72px-->
			</div>
			<!--时间&按钮：（加强训练）/更改/删除-->
			<div class="control-container">
				<div class="time">{{ quesData.insertTime }}</div>
				<div style="flex: 0.76;"></div>
				<wd-button size="small" @click="aiRecommand">智能推荐</wd-button>
				<wd-button size="small" @click="changeChangeMode" v-if="!changeMode" type="info">更改</wd-button>
				<wd-button size="small" @click="changeChangeMode" v-else type="info">取消</wd-button>
				<wd-button size="small" @click="deleteQues" type="error">删除</wd-button>
			</div>
			<!--AI助手-->
			<div class="ai-btn" @click="changeAiCardHide">AI</div>
			<transition name="fade">
				<QuesAiCard :quesId="1" @hide="changeAiCardHide" v-if="aiCardShow"></QuesAiCard>
			</transition>
		</view>
	</wd-config-provider>
</template>
<script>
	import {tmpOCRResult1, tmpOCRResult2, tmpOCRResult3, tmpOCRResult4} from '@/js/ques.js'
	import CustomNewQues from '@/components/CustomNewQues.vue'
	import XuanzeCard from '@/components/XuanzeCard.vue'
	import NewTagCom from '@/components/NewTagCom.vue'
	import QuesAiCard from '@/components/QuesAiCard.vue'
	import timestampToFormattedDateTime from '@/js/timestampToFormattedDateTime.js'
	import { handleOcr } from '@/js/ocrResultHandler.js';
	
	export default {
		data() {
			return {
				changeMode: false,
				customNewQues: null,
				addTagQuesIndex: '',
				aiCardShow: false,
				quesData: {
					category: null
				}
			}
		},
		onLoad(options) {
			let jsonDataStr = decodeURIComponent(options.jsonData);
			this.quesData = JSON.parse(jsonDataStr);
			this.quesData.insertTime = timestampToFormattedDateTime(this.quesData.insertTime);
			console.log('获取到习题集' + this.quesData);
		},
		methods: {
			//底部面板
			aiRecommand(){
				uni.showLoading({
					title: '智能分析中...'
				})
				setTimeout(()=>{
					uni.hideLoading()
					const result = handleOcr(tmpOCRResult1)
					console.log(result)
					uni.navigateTo({
						url: '/pages/QuesSimilarPage/QuesSimilarPage?jsonData='+ encodeURIComponent(JSON.stringify(result))
					})
				},4000)
			},
			changeChangeMode(){
				this.changeMode = !this.changeMode
			},
			deleteQues(){
				//TODO
			},
			//AI
			changeAiCardHide(){
				this.aiCardShow = !this.aiCardShow
				setTimeout(()=>{
					if(this.quesData.category === 'yuedu'){
						const aiQuestion = '$你好，我想请问一下这道英语阅读题这道题的短文是，\n' +
											this.quesData.content +
											'这道题的题目JSON（附带我的答案）是：\n' + 
											JSON.stringify(this.quesData.cuoTiList) + 
											'请在后续的对话中帮助我\n' + 
											'首句输出请说‘您好，我看到了您的这道阅读题的作答情况...请问您要问的是哪道小题...’，...部分请根据JSON数据补充，回答长度限制在100个字以内！回答要精短！'
						uni.$emit('chatAccept', aiQuestion)
					}else if(this.quesData.category === 'xuanze'){
						const aiQuestion = '$你好，我想请问一下这道英语选择题，这道题的JSON是，\n' +
											JSON.stringify(this.quesData) +
											'其中题目是problem，选择项A是choice1，选项B是choice2，选项C是choice3，选项D是choice4，标准答案是answer，用户选的答案是stuAnswer\n' + 
											'请在后续的对话中帮助我\n' + 
											'首句输出请说‘您好，我看到了这道选择题...’，回答长度限制在100个字以内！回答要精短！'
						uni.$emit('chatAccept', aiQuestion)
					}
					
				},200)
			},
			//ai分析-选择/阅读
			aiAnalyseBtn(){
				
			},
			aiAnalyseBtnYueDu(){
				
			},
			//新增错题
			addNewQuesBtn(){
				uni.showLoading({
					title: '上传中...'
				})
				setTimeout(()=>{
					uni.hideLoading()
					uni.showToast({
						icon: 'success',
						title: '更改成功'
					})
					this.changeChangeMode()
				},2400)
				/* const sendData = this.quesData[index]
				console.log(sendData)
				uni.showLoading({
				    title: '分析中...'
				});
				let that = this;
				uni.request({
				  url: globalProps.baseApi + 'cuotiji/addCuotiFromExe',
				  method: 'POST',
				  data: sendData,
				  success: function (res) {
					uni.hideLoading();
					uni.showToast({
						title: '添加成功',
						icon: 'success'
					})
					setTimeout(()=>{
						uni.switchTab({
							url: '/pages/HomePage/HomePage'
						})
					},1800)
				  },
				  fail: function (err) {
				    console.log('添加错题失败', err);
				    uni.showToast({
				    	title: '请求失败',
				    	icon: 'error'
				    })
				  }
				}); */
			}
		}
	}
</script>

<script setup>
	import TabbarCom from '@/components/TabbarCom.vue'
	import { ref } from 'vue';
	import { globalProps } from '@/js/global.js'
	
	const statusBarHeight = ref(globalProps.statusBarHeight)
	const capsuleHeight = ref(globalProps.capsuleHeight)
	const jumpBack = ()=>{
		uni.switchTab({
			url: '/pages/HomePage/HomePage'
		})
	}
</script>

<style>
	@import "@/css/global.css";
	@import "@/css/animation.css";
	.head-container{
		display: flex;
		align-items: center;
		margin: 0 16px;
		justify-content: space-between;
		color: #fff;
		width: calc(100% - 32px);
		letter-spacing: 1px;
	}
	.tabbarpage-container-dark{
		background-color: #1b1b1b;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.skeleton-container{
		position: absolute;
		top: 20px;
		left: 12px;
		right: 12px;
		height: 120px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.ques-container{
		position: absolute;
		top: 8px;
		bottom: 12px;
		left: 12px;
		right: 12px;
		overflow-y: scroll;
		overflow-x: hidden;
		height: 100%;
	}
	.ques-container .content{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: start;
	}
	.ques-line{
		color: #fff;
		padding: 12px 4px;
		white-space: pre-line;
		word-break: break-all;
		display: flex;
		flex-direction: column;
		animation: appear-ani .8s 1;
	}
	.ques-line .btns-container{
		margin: 16px 0 8px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		animation: appear-ani .8s 1;
	}
	.ques-line .btns-container button{
		padding: 4px 20px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		margin: 0;
		color: #fff;
	}
	.ques-line .btns-container button:nth-child(2){
		background-color: #4942ad;
	}
	.ques-line .btns-container button:nth-child(1){
		background-color: #888;
	}
	.ques-line .text-area{
		width: calc(100% - 16px);
		min-height: 28px;
		height: auto;
		background-color: #ffffff11;
		padding: 8px;
		z-index: 0;
		white-space: pre-line;
	}
	.h1-line{
		width: 100%;
		display: flex;
	}
	.h1{
		font-weight: bold;
		letter-spacing: 1px;
		font-size: 18px;
		margin-bottom: 12px;
	}
	.sure-btn-container{
		margin-bottom: 32px;
		animation: appear-ani .8s 1;
	}
	.sure-btn{
		margin: 12px 4px 24px 4px;
		width: calc(100% - 8px);
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40px;
		background-color: #4942ad;
		color: #fff;
		border-radius: 8px;
		box-shadow: 0 0 4px #00000022;
	}
	.ai-btn{
		position: fixed;
		bottom: 80px;
		right: 20px;
		width: 48px;
		height: 48px;
		color: #fff;
		background: linear-gradient(to right bottom, #d656d488, #2341ad66);
		backdrop-filter: blur(4px);
		border-radius: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 19px;
		letter-spacing: 2px;
	}
	.tag-container{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-bottom: 8px;
	}
	.tag-container .tag{
		background-color: #4942ad;
		padding: 4px 8px;
		font-size: 13px;
		border-radius: 4px;
		margin: 0 8px 0 0;
	}
	.ques-line-card{
		margin: 8px 0;
		padding: 12px;
		width: calc(100% - 26px);
		border-radius: 8px;
		border: 1px solid #2e4e99;
	}
	.control-container{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 40px;
		background-color: #888888bb;
		padding: 4px 8px 12px 8px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		animation: bottom-in-ani .6s 1;
	}
	.control-container .time{
		color: #fff;
		font-size: 12px;
		white-space: nowrap;
		margin-left: 4px;
	}
</style>
